<template>
  <div>
    <el-dialog title="选择栏目" v-model="showDialog" width="640px" align-center>
      <div class="category-tree-box">
        <div class="version-choose-box" v-if="categoryList.length > 1">
          <li class="version-item" v-for="(item, index) in categoryList" :key="item.id" :class="{ active: activeVersion === index }" @click="handleChangeVersion(index)">
            <span class="version-item-name" :title="item.name">{{ item.name }}</span>
            <i class="iconfont">&#xe645;</i>
          </li>
        </div>
        <div class="category-tree-list">
          <div class="category-tree-children" v-for="(item, index) in categoryList" :key="item.id" v-show="activeVersion === index">
            <el-scrollbar height="600px">
              <el-tree
                :data="item.children"
                :props="defaultProps"
                :check-on-click-node="true"
                node-key="id"
                class="tree-content"
                :default-expanded-keys="categoryChooseIds"
                @node-click="handleNodeClick"
              >
                <template #default="{ node, data }">
                  <div class="tree-node-category">
                    <span>{{ data.name }}</span>
                    <el-checkbox v-if="node.isLeaf" v-model="data.checked" @click.prevent="handleTreeCheck"></el-checkbox>
                  </div>
                </template>
              </el-tree>
            </el-scrollbar>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancelChooseCategory">取消</el-button>
          <el-button type="primary" @click="handleConfirmChooseCategory">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { defineProps, defineEmits, ref, watch, computed } from 'vue'

const props = defineProps({
  //打开dialog
  showDialog: {
    type: Boolean,
    default: false
  },
  categoryList: {
    type: Array,
    default: () => []
  },
  defaultProps: {
    type: Object,
    default: () => {
      return {
        children: 'children',
        label: 'name',
        class: function (data, node) {
          if (node.isLeaf) {
            return 'is-leaf'
          }
        }
      }
    }
  },
  // 是否单选
  isSingle: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['update:showDialog', 'treeChoosed'])

const showDialog = computed({
  get() {
    return props.showDialog
  },
  set(val) {
    emits('update:showDialog', val)
  }
})
const activeVersion = ref(0)
const categoryChooseWait = ref([])
const categoryChoose = ref([])
const categoryChooseIds = computed(() => {
  return categoryChooseWait.value.map(item => {
    return item.id
  })
})
watch(
  props,
  () => {
    if (showDialog.value) {
      categoryChooseWait.value = []
      initChecked(props.categoryList)
    }
  },
  { deep: true }
)

const handleChangeVersion = index => {
  activeVersion.value = index
}
const handleNodeClick = (data, node) => {
  // 叶子节点修改check
  if (node.isLeaf) {
    data.checked = !data.checked
    if (data.checked) {
      if (props.isSingle) {
        //单选
        categoryChooseWait.value = [data]
        cancelOtherChecked(props.categoryList, data)
      } else categoryChooseWait.value.push(data) //多选
    } else {
      categoryChooseWait.value = categoryChooseWait.value.filter(item => {
        return item.id !== data.id
      })
    }
  }
}
// 取消其他勾选
const cancelOtherChecked = (arr, curData) => {
  arr.forEach(item => {
    if (item.children && item.children.length > 0) {
      cancelOtherChecked(item.children, curData)
    }
    if (item.id != curData.id) item.checked = false
  })
}
// 根据父组件传来的数据初始化选择树
const initChecked = arr => {
  arr.forEach(item => {
    if (item.children && item.children.length > 0) {
      initChecked(item.children)
    }
    if (item.checked) {
      categoryChooseWait.value.push(item)
    }
  })
}
const handleTreeCheck = () => {
  return false
}
const handleConfirmChooseCategory = () => {
  // 保存栏目并关闭
  categoryChoose.value = JSON.parse(JSON.stringify(categoryChooseWait.value))
  showDialog.value = false
  emits('treeChoose', categoryChoose.value)
}
const handleCancelChooseCategory = () => {
  // 取消选择并关闭
  categoryChooseWait.value = []
  showDialog.value = false
}
</script>
<style lang="scss" scoped>
.category-tree-box {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e4e4e4;
  height: 600px;
  display: flex;
  overflow: hidden;
  .version-choose-box {
    width: 160px;
    border-right: 1px solid #e4e4e4;
    padding: 10px 0;
    li.version-item {
      height: 40px;
      line-height: 40px;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      .version-item-name {
        font-size: 14px;
        color: #333;
        @include textEllipsis(40px, 1);
      }
      i {
        font-size: 12px;
        color: #aaaaaa;
      }
    }
    li.version-item.active {
      .version-item-name {
        font-weight: bold;
        color: $mainColor;
      }
    }
  }
  .category-tree-list {
    flex: 1;
    .category-tree-children {
      width: 100%;
      .tree-content {
        ::v-deep(.el-tree-node__label) {
          width: 100%;
        }
        ::v-deep(.el-tree-node__content) {
          height: 40px;
        }
        .tree-node-category {
          height: 40px;
          width: 100%;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          padding: 0 20px 0 0;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>
